@extends('layouts.header')
@section('title','预览')
@section('content')
    <article class="page-container text-c">
        <input type="text" id="btn" style="width: 0; height: 0;position: absolute; left: -100000">
        <div class="row cl mt-10">
            <div>
                @for($i=0;$i<($info->channel_count+1);$i++)
                    <a class="btn  radius @if($i == request('num')) btn-success @else btn-primary @endif" onclick="channel(this,{{$i}})">通道{{$i}}</a>
                @endfor
            </div>
            <div>单击下面空白区域显示画面 <br> 双击画面可全屏查看</div>
            <div id="iframe">
                <iframe id="iframe_box" class="lazyload" src="http://{{$info->server_lan_ip}}/led/ok.html?url=rtsp://{{$info->username}}:{{$info->password}}-{{$info->lan_ip}}:554/Streaming/Channels/{{request('num')}}01" frameborder="0" width="100%" height="800px"  scrolling="auto" allowfullscreen="true"></iframe>
            </div>
        </div>
    </article>
    <script>
        function channel(obj,num) {
            $(obj).siblings().removeClass('btn-success').addClass('btn-primary');
            $(obj).removeClass('btn-primary').addClass('btn-success');
            let str = '<iframe id="iframe_box" class="lazyload" src="http://{{$info->server_lan_ip}}/led/ok.html?url=rtsp://{{$info->username}}:{{$info->password}}-{{$info->lan_ip}}:554/Streaming/Channels/'+num+'01" frameborder="0" width="100%" height="800px" scrolling="auto" allowfullscreen="true"></iframe>';
            $('#iframe').html(str);
        }
    </script>
@endsection
